<script>

export default {
  data() {
    return {
      show: false,
      loading: false,
      row: {
        nameKeywords: ""
      },
      descriptionMap: {},
      fileIdOfIconMap: {},
      // 选择编辑的语言
      languageCodeOfEdit: "",
      requestParam:{
        languageCode: "",
        description: "",
        fileIdOfIcon: "",
      },
      isToI18nDisabled: false
    }
  },
  mounted() {
  },
  methods: {
    async toI18n(){
      this.isToI18nDisabled = true;
      this.$forceUpdate();
      // 一键翻译，获取所有支持的语言
      let supportLanguage = this.$kt.i18n.getSupportLanguage();
      for (let i = 0; i < supportLanguage.length; i++) {
        if(supportLanguage[i].code === "zh_CN"){
          continue;
        }
        await new Promise((resolve, reject) => {
          this.$kt.request.send({
            uri: '/api-google-translate-web/translate/translateText',
            data: {
              "sourceLanguageCode":"zh_CN",
              "targetLanguage":supportLanguage[i].code,
              "text":this.row.description
            },
            stateSuccess: async (res) => {
              // console.log(res);
              await this.toRequest(this.row.id,{
                languageCode: supportLanguage[i].code,
                description: res.data
              }).then(()=>{
                resolve();
              }).catch(()=>{
                resolve();
              });
              this.requestGetByCarouselImageId();
            },
            stateFail: (err) => {
              this.$message.error(err.errMsg);
              resolve();
            }
          });
        });
      }
      setTimeout(() => {
        this.isToI18nDisabled = false;
      }, 1000);
    },
    toRequest(id,requestParam){
      return new Promise((resolve, reject) => {
        this.loading = true;
        this.$kt.request.send({
          uri: '/bus-visa-web/admin/visaGoodsI18n/newSave',
          data: {
            visaGoodsId: id,
            languageCode: requestParam.languageCode,
            description: requestParam.description,
          },
          stateSuccess: (res) => {
            // this.$message.success(res.msg);
            this.cancelEdit();
            this.saveRequest();
            resolve();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            resolve();
          }
        });
      });
    },
    toEdit(languageCode) {
      this.languageCodeOfEdit = languageCode;
      this.requestParam.languageCode = languageCode;
      this.requestParam.description = this.getNameByLanguageCode(languageCode);
      if(this.getFileIdOfIconByLanguageCode(languageCode)){
        this.requestParam.fileIdOfIcon = this.getFileIdOfIconByLanguageCode(languageCode);
      }
    },
    // 取消编辑
    cancelEdit() {
      this.languageCodeOfEdit = "";
    },
    saveRequest(){
      // // nameJsonStr
      // // this.row.nameJsonStr = JSON.stringify(this.nameMap);
      // console.log(JSON.stringify(this.descriptionMap));
      // this.row.nameKeywords = "";
      // let keys = Object.keys(this.descriptionMap);
      // console.log(JSON.stringify(keys))
      // for (let i = 0; i < keys.length; i++) {
      //   let key = keys[i];
      //   console.log(key,"-=-=");
      //   this.row.nameKeywords += this.getNameByLanguageCode(key) + "&&&";
      // }
      // console.log(this.row.nameKeywords);
      //
      // // /business-shop-web/admin/shopGoodsSimpleVO/save
      //
      // this.$kt.request.send({
      //   uri: '/bus-visa-web/admin/visaGoodsSimpleVO/save',
      //   data: this.row,
      //   stateSuccess: (res) => {
      //     console.log(res,"-=-=");
      //     // this.$message.success(res.msg);
      //   },
      //   stateFail: (err) => {
      //     // this.$message.error(err.errMsg);
      //   }
      // });
    },
    // 确认编辑
    confirmEdit() {
      this.loading = true;
      this.$kt.request.send({
        uri: '/bus-visa-web/admin/visaGoodsI18n/newSave',
        data: {
          visaGoodsId: this.row.id,
          languageCode: this.requestParam.languageCode,
          description: this.requestParam.description,
        },
        stateSuccess: (res) => {
          this.$message.success(res.msg);
          this.cancelEdit();
          this.requestGetByCarouselImageId();
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    },
    open(row) {
      this.clearMap();
      this.row = row;
      this.requestGetByCarouselImageId();
      this.show = true;
    },
    close() {
      this.show = false;
    },
    clearMap() {
      this.descriptionMap = {};
      this.fileIdOfIconMap = {};
    },
    clearFileIdIconByLanguageCode(languageCode) {
      return new Promise((resolve, reject) => {
        this.loading = true;
        this.requestParam.fileIdOfIcon = null;
        // /business-common-web/admin/carouselImageI18n/clearFileIdImageByLanguageCode
        this.$kt.request.send({
          uri: '/business-shop-web/admin/shopGoodsAttrI18n/clearFileIdOfIconByLanguageCodeAndGoodsTypeId',
          data: {
            goodsTypeId: this.row.id,
            languageCode: languageCode,
          },
          stateSuccess: (res) => {
            this.requestGetByCarouselImageId();
            this.loading = false;
            resolve();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            this.loading = false;
            reject();
          }
        });
        resolve();
      });
    },
    requestGetByCarouselImageId() {
      this.loading = true;
      this.$kt.request.send({
        uri: '/bus-visa-web/admin/visaGoodsI18n/getByVisaGoodsId',
        data: {
          visaGoodsId: this.row.id
        },
        stateSuccess: (res) => {
          let data = res.data;
          this.clearMap();
          for (let i = 0; i < data.length; i++) {
            this.descriptionMap[data[i].languageCode] = data[i].description;
          }
          this.$forceUpdate();
          this.loading = false;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.loading = false;
        }
      });
    },
    getNameByLanguageCode(languageCode) {
      return this.descriptionMap[languageCode];
    },
    getFileIdOfIconByLanguageCode(languageCode) {
      return this.fileIdOfIconMap[languageCode];
    },
    setFileIdOfImageByLanguageCode(languageCode, fileId) {
      return new Promise((resolve, reject) => {
        this.fileIdOfIconMap[languageCode] = fileId;
        resolve();
      });
    },

    chooseImg() {
      // 选择文件
      this.$kt.file.chooseImageOne().then(res => {
        this.loading = true;
        // 上传这个文件
        this.$kt.request.uploadFile({
          file: res.file,
          // 这个是文件组编码
          groupCode: "goodsTypeIcon",
          stateSuccess: async (res) => {
            this.requestParam.fileIdOfIcon = res.data.id;
            this.loading = false;
          },
          stateFail: (res) => {
            this.$message.error(res.errMsg);
            this.loading = false;
          }
        });
      });
    }
  }
}
</script>

<template>
  <el-dialog
      :draggable="true"
      title="商品描述国际化"
      v-model="show"
      v-loading="loading"
      width="85%">
    <div style="text-align: right">
      <el-button
          @click="toI18n"
          :disabled="isToI18nDisabled"
          type="primary"
      >{{isToI18nDisabled?'翻译中...':'一键翻译'}}</el-button>
    </div>
    <el-scrollbar style="height: calc(100vh - 150px);width: 100%;">

      <div style="text-align: center">
        <el-card style="margin: 20px;display: inline-block;width: 300px;"
                 v-for="item in $kt.i18n.getSupportLanguage()"
        >
          <div style="text-align: left;height: 20px">
            语言：{{ item.name }} #{{ item.code }}
          </div>
          <div style="height: 20px"></div>
          <div style="text-align: center">


            <div style="height: 20px"></div>
            <div>
              <el-input
                  v-if="languageCodeOfEdit !== item.code"
                  v-model="descriptionMap[item.code]"
                  type="textarea"
                  placeholder="默认描述"
                  :input-style="{
                    width: '100%',
                    height:'200px'
                  }"
                  disabled></el-input>

              <el-input
                  v-else
                  type="textarea"
                  v-model="requestParam.description"
                  placeholder="默认描述"
                  :input-style="{
                    width: '100%',
                    height:'200px'
                  }"></el-input>
            </div>
          </div>

          <div style="height: 20px"></div>
          <div style="text-align: center">
            <el-button
                v-if="languageCodeOfEdit !== item.code"
                @click="toEdit(item.code)"
            >编辑</el-button>
            <div
                v-else
            >
              <el-button
                  @click="cancelEdit"
              >取消</el-button>
              <el-button
                  type="primary"
                  @click="confirmEdit"
              >确定</el-button>
            </div>
          </div>

        </el-card>

      </div>


    </el-scrollbar>

  </el-dialog>
</template>

<style scoped lang="scss">
.img-box {
  position: relative;
  cursor: pointer;
  color: #666666;
  height: 150px;
  width: 150px;
  display: inline-block;

  .img-box-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 0 0 10px 10px;
    z-index: 1;
    color: #fff;
    text-align: center;
    bottom: 0;
    padding: 5px;
    box-sizing: border-box;
  }

  .btn{
    position: absolute;
    border-radius: 10px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 12px;
    z-index: 1;
    // 不可选中
    user-select: none;
    background-color: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,.6);
    padding: 5px;
    top: 10px;
    right: 10px;
  }

  .btn:hover{
    opacity: .8;
  }

  .btn:active{
    opacity: .6;
  }
}

.img-box-overlay:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.img-box-overlay:active {
  background-color: rgba(0, 0, 0, 0.4);
}


</style>